﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<script>
    var keyValue = $.request("keyValue");
    var itemList = [],
        index = 0;
    var site_type = '', city = "", district = "", provinces = "", business = "";
    $(function () {
        getDistrict(0);
        getItemList();

        $("#btn_add_city").click(function () {

            var provinces = $("#F_ProvincesId").html();
            // console.log(provinces);
            var html = '';
            html += '<tr id="panel_city_' + index + '">';
            html += '   <th class="formTitle">省份<span style="color:red">*</span></th>';
            html += '   <td class="formValue">';
            html += '       <select onchange="onGetCity(' + index + ')" id="F_ProvincesId_' + index + '" name="F_ProvincesId_' + index + '" class="form-control required F_ProvincesId">';
            html += provinces;
            html += '       </select>';
            html += '   </td>';
            html += '   <th class="formTitle">城市<span style="color:red">*</span></th>';
            html += '   <td class="formValue">';
            html += '       <select onchange="onGetDistrict(' + index + ')" id="F_CityId_' + index + '" name="F_CityId_' + index + '" class="form-control required">';
            html += '       </select>';
            html += '   </td>';
            html += '   <td>';
            html += '       <button type="button" class="btn btn-link" title="删除" onclick="onRemoveCity(this, ' + index + ')"><span class="glyphicon glyphicon-remove"></span></button>';
            html += '   </td>';
            html += '</tr>';
            html += '<tr id="panel_other_' + index + '">';
            html += '  <th class="formTitle">区域</th>';
            html += '   <td class="formValue">';
            html += '       <select onchange="onGetBusiness(' + index + ')" id="F_DistrictId_' + index + '" name="F_DistrictId_' + index + '" class="form-control">';
            html += '       </select>';
            html += '   </td>';
            html += '   <th class="formTitle">商圈</th>';
            html += '   <td class="formValue">';
            html += '       <select id="F_BusinessArea_' + index + '" name="F_BusinessArea_' + index + '" class="form-control">';
            html += '       </select>';
            html += '   </td>';
            html += '   <td></td>';
            html += '</tr>';

            $("#panel_add_city").before(html);
            $(".F_ProvincesId").bindSelect();
            $("#F_CityId_" + index + ",#F_DistrictId_" + index + ",#F_BusinessArea_" + index).bindSelect();

            index++;
        });

        if (!!keyValue && keyValue.length>15) {
            $.ajax({
                url: "/SiteManage/SiteDemand/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    $("#form1").formSerialize(data);
                    if (data.F_BDUserId) {
                        GetUserName(data.F_BDUserId, "BD");
                    }
                }
            });
        }
    });

    function onRemoveCity(dom, index) {
        $("#panel_city_" + index + ",#panel_other_" + index).remove();
    }

    function onGetCity(index) {
        var pidValue = $("#F_ProvincesId_" + index).val(),
            html = '<option value=\'\' selected>==请选择城市数据==</option>';
        $.ajax({
            url: "/SystemManage/Area/GetListByParentId?code=" + pidValue,
            dataType: "json",
            async: false,
            success: function (data) {
                if (data && data.length) {
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        html += '<option value="' + item.F_EnCode + '">' + item.F_FullName + '</option>';
                    }
                    
                }
                $("#F_CityId_" + index).html(html).bindSelect();
                //onGetDistrict(index);
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }

    function onGetDistrict(index) {
        var pidValue = $("#F_CityId_" + index).val(),
            html = '<option value=\'\' selected>==请选择行政区域==</option>';
        $.ajax({
            url: "/SystemManage/Area/GetListByParentId?code=" + pidValue,
            dataType: "json",
            async: false,
            success: function (data) {
                if (data && data.length) {
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        html += '<option value="' + item.F_EnCode + '">' + item.F_FullName + '</option>';
                    }
                }
                $("#F_DistrictId_" + index).html(html).bindSelect();
                //onGetBusiness(index);
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }

    function onGetBusiness(index) {
        var pidValue = $("#F_DistrictId_" + index).val(),
            html = '<option value=\'\' selected>==请选择商圈==</option>';
        $.ajax({
            url: "/SystemManage/Area/GetListByParentId?code=" + pidValue,
            dataType: "json",
            async: false,
            success: function (data) {
                if (data && data.length) {
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        html += '<option value="' + item.F_EnCode + '">' + item.F_FullName + '</option>';
                    }
                }
                $("#F_BusinessArea_" + index).html(html).bindSelect();
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }

    function GetUserName(f_id, type) {
        $.ajax({
            url: "/SystemManage/User/GetFormJson",
            dataType: "json",
            data: { keyValue: f_id },
            async: false,
            success: function (userdata) {
                if (userdata) {
                    if (type == "BD") {
                        $("#bd_admin").val(userdata.F_RealName);
                    }
                }
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }
    function getItemList() {
        itemList = getCache("SJZD");
        if (!itemList || itemList.length <= 0) {
            $.ajax({
                url: "/SiteManage/Site/GetItemListJson",
                dataType: "json",
                async: false,
                success: function (data) {
                    itemList = data;
                    initControl(data);
                    setCache("SJZD", itemList);
                }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });
        }
        else {
            initControl(itemList);
        }
    }
    function getDistrict(type) {
        var pidValue, actionid;
        if (type == "city") {
            pidValue = $("#F_ProvincesId").val();
            actionid = "F_CityId";
        }
        else if (type == 'district') {
            pidValue = $("#F_CityId").val()
            actionid = "F_DistrictId";
        }
        else if (type == 'business') {
            pidValue = $("#F_DistrictId").val();
            actionid = "F_BusinessArea";
        }
        else {
            pidValue = 0;
            actionid = "F_ProvincesId";
        }
        $.ajax({
            url: "/SystemManage/Area/GetListByParentId?code=" + pidValue,
            dataType: "json",
            async: false,
            success: function (data) {
                CityControl(data, type, actionid);
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }
    function CityControl(ItemList, type, actionid) {
        var items = ItemList; var bindid;
        if (type == "city") {
            bindid = $("#F_CityId,#F_DistrictId,#F_BusinessArea");
            bindid.empty();
            $("#F_CityId").append("<option value=''>==请选择城市数据==</option>");
            $("#F_DistrictId").append("<option value=''>==请选择行政区域==</option>");
            $("#F_BusinessArea").append("<option value=''>==请选择商圈==</option>");
        }
        else if (type == "district") {
            bindid = $("#F_DistrictId,#F_BusinessArea");
            bindid.empty();
            $("#F_DistrictId").append("<option value=''>==请选择行政区域==</option>");
            $("#business_area").append("<option value=''>==请选择商圈==</option>");
        }
        else if (type == "business") {
            bindid = $("#F_BusinessArea");
            bindid.empty();
            $("#F_BusinessArea").append("<option value=''>==请选择商圈==</option>");
        }
        else {
            bindid = $("#F_CityId,#F_DistrictId,#F_BusinessArea,#F_ProvincesId");
            bindid.empty();
            $("#F_ProvincesId").append("<option value='' selected='selected'>==请选择省份==</option>");
            $("#F_CityId").append("<option value='' selected='selected'>==请选择城市数据==</option>");
            $("#F_DistrictId").append("<option value='' selected='selected'>==请选择行政区域==</option>");
            $("#F_BusinessArea").append("<option value='' selected='selected'>==请选择商圈==</option>");
        }
        for (var i = 0; i < items.length; i++) {
            if (type == 0 && items[i].F_Id == provinces) {
                $("#" + actionid).append("<option selected='selected' value='" + items[i].F_Id + "'>" + items[i].F_FullName + "</option>");
            }
            else if (type == "city" && items[i].F_Id == city) {
                $("#" + actionid).append("<option selected='selected' value='" + items[i].F_Id + "'>" + items[i].F_FullName + "</option>");
            }
            else if (type == "district" && items[i].F_Id == district) {
                $("#" + actionid).append("<option selected='selected' value='" + items[i].F_Id + "'>" + items[i].F_FullName + "</option>");
            }
            else if (type == 'business' && items[i].F_Id == business) {
                $("#" + actionid).append("<option selected='selected' value='" + items[i].F_Id + "'>" + items[i].F_FullName + "</option>");
            }
            else {
                $("#" + actionid).append("<option value='" + items[i].F_Id + "'>" + items[i].F_FullName + "</option>");
            }
        }
        if (keyValue != null && keyValue.length > 0) {
            if (type == 'city' && $("#F_ProvincesId").val() == provinces) {
                getDistrict("district");
            } else if (type == 'district' && $("#F_CityId").val() == city) {
                getDistrict("business");
            }
        }
        bindid.bindSelect();

    }
    function initControl(ItemList) {
        var sitetype = ItemList.SiteType;
        for (var i = 0; i < sitetype.length; i++) {
            $("#F_SiteType").append("<option value='" + sitetype[i].F_ItemCode + "'>" + sitetype[i].F_ItemName + "</option>");
        }
        $("#F_SiteType").select2();
        var bindid = $("#F_CityId,#F_DistrictId,#F_BusinessArea,#F_ProvincesId");
        bindid.bindSelect();
    }

    function submitForm() {
        if (!$('#form1').formValid()) {
            return false;
        }
        //$.submitForm({
        //    url: "/SiteManage/SiteDemand/SubmitForm?keyValue=" + keyValue,
        //    param: $("#form1").formSerialize(),
        //    success: function () {
        //    }
        //})


        if (keyValue.length < 15) {
            keyValue = "";
        }

        var tmp = $("#form1").formSerialize(),
            provinces = [$("#F_ProvincesId").val()],
            city = [$("#F_CityId").val()],
            district  = [$("#F_DistrictId").val()],
            businessArea = [$("#F_BusinessArea").val()];

        $("#form1 select[id*='F_ProvincesId_']").each(function () {
            provinces.push($(this).val());
        });
        $("#form1 select[id*='F_CityId_']").each(function () {
            city.push($(this).val());
        });
        $("#form1 select[id*='F_DistrictId_']").each(function () {
            district.push($(this).val() || '');
        });
        $("#form1 select[id*='F_BusinessArea_']").each(function () {
            businessArea.push($(this).val() || '');
        });

        var params = {
            F_ProvincesId: provinces.toString(),
            F_CityId: city.toString(),
            F_DistrictId: district.toString(),
            F_BusinessArea: businessArea.toString(),
            F_SiteType: tmp.F_SiteType,
            F_MaxPeople: tmp.F_MaxPeople.replace("&nbsp;", ""),
            F_Area: tmp.F_Area.replace("&nbsp;", ""),
            F_Height: tmp.F_Height.replace("&nbsp;", ""),
            F_BDUserId: tmp.F_BDUserId,
            F_Notes: tmp.F_Notes.replace("&nbsp;", "")
        };
        //console.log(params)

        $.ajax({
            url: "/SiteManage/SiteDemand/SubmitForm?keyValue=" + keyValue,
            dataType: "json",
            type: 'post',
            data: params,
            async: false,
            success: function (data) {
                if (data.state == "success") {
                    $.modalAlert("场地需求提交成功!", "warning");
                    if (keyValue.length > 15) {
                        $.currentWindow().$("#gridList").trigger("reloadGrid");
                    }
                    $.modalClose();
                } else {
                    $.modalAlert("信息提交失败，请联系管理员!", "warning");
                }
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }
    function btn_selectUser(type) {
        $.modalOpen({
            id: "SelectUser",
            title: "选择用户",
            url: "/SystemManage/User/SelectUser?keyValue=" + keyValue + "&type=" + type,
            width: "800px",
            height: "700px",
            callBack: function (iframeId) {
                top.frames[iframeId].submitForm();
            }
        });
    }
    function setDBuser(value, id) {
        $("#F_BDUserId").val(id);
        $("#bd_admin").val(value);
    }
</script>
<style>
    .form .formValue .input-group .btn {
        height: 20px !important;
    }

</style>
<form id="form1">
    <div style="padding-top: 20px; margin-right: 20px;">
        <table class="form">
            <tr>
                <th class="formTitle">省份<span style="color:red">*</span></th>
                <td class="formValue">
                    <select id="F_ProvincesId" onchange="getDistrict('city')" name="F_ProvincesId" class="form-control required"></select>
                </td>
                <th class="formTitle">城市<span style="color:red">*</span></th>
                <td class="formValue">
                    <select id="F_CityId" onchange="getDistrict('district')" name="F_CityId" class="form-control required"></select>
                </td>
                <td>
                    <button id="btn_add_city" type="button" class="btn btn-link" title="添加"><span class="glyphicon glyphicon-plus"></span></button>
                </td>
            </tr>
            <tr>
                <th class="formTitle">区域</th>
                <td class="formValue">
                    <select id="F_DistrictId" name="F_DistrictId" onchange="getDistrict('business')" class="form-control"></select>
                </td>
                <th class="formTitle">商圈</th>
                <td class="formValue">
                    <select id="F_BusinessArea" name="F_BusinessArea" class="form-control"></select>
                </td>
                <td></td>
            </tr>
            <tr id="panel_add_city">
                <th class="formTitle">场地类型<span style="color:red">*</span></th>
                <td class="formValue">
                    <select id="F_SiteType" name="F_SiteType" class="form-control required"></select>
                </td>
                <th class="formTitle">容纳人数</th>
                <td class="formValue">
                    <input id="F_MaxPeople" name="F_MaxPeople" type="number" class="form-control" placeholder="请录入容纳人数" />
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="formTitle">面积</th>
                <td class="formValue">
                    <input id="F_Area" name="F_Area" type="number" class="form-control" placeholder="请录入面积" />
                </td>
                <th class="formTitle">层高</th>
                <td class="formValue">
                    <input id="F_Height" name="F_Height" type="number" class="form-control" placeholder="请录入层高" />
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="formTitle">BD人员<span style="color:red">*</span></th>
                <td class="formValue">
                    <input id="F_BDUserId" name="F_BDUserId" type="hidden" />
                    <div class="input-group">
                        <input id="bd_admin" name="bd_admin" onclick="btn_selectUser('BD')" type="text" class="form-control required" placeholder="请录入BD人员" />
                        <span class="input-group-btn" onclick="btn_selectUser('BD')">
                            <a class="btn btn-primary" href="javascript:void(0);"><i class="fa fa-ellipsis-h"></i></a>
                        </span>
                    </div>
                </td>
                <th></th>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th class="formTitle">备注</th>
                <td class="formValue" colspan="4">
                    <input id="F_Notes" name="F_Notes" type="text" multiple="multiple" class="form-control" placeholder="请录入备注" />
                </td>
            </tr>
        </table>
    </div>
</form>


